<template>
    <el-select
      v-model="value"
      filterable
      remote
      placeholder="请输入关键词"
      :remote-method="search"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
   
  <script>
  export default {
    data() {
      return {
        value: '',
        options: [],
        loading: false
      };
    },
    methods: {
      search(query) {
        if (query !== '') {
          this.loading = true;
          // 模拟远程搜索
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => item.label.includes(query)).map(item => ({
              label: item.label,
              value: item.value
            }));
          }, 200);
        } else {
          this.options = [];
        }
      }
    },
    computed: {
      list() {
        return [
          { value: 'Option1', label: '选项1' },
          { value: 'Option2', label: '选项2' },
          { value: 'Option3', label: '选项3' },
          // ...更多选项
        ];
      }
    }
  };
  </script>